<template>
    <view class="container">
        <header-bar :config="config"></header-bar>
        <view class="main">
            <mescroll-uni v-if="loadOk" ref="mescrollRef" @init="mescrollInit" :height="height" :down="downOption"
                @down="downRefresh" :up="upOption" @up="getData">
                <view class="pro-list-item" @click="goCommodity(item)" v-for="(item, index) in datas" :index="index"
                    :key="index">
                    <view class="pro-main">
                        <view class="pro-name">
                            <text class="pro-name-text">{{ item.PName }}</text>
                        </view>
                        <view class="custom-main">
                            <view>销售量：{{ item.Qty }}</view>
                            <view>销售额：{{ item.Total }}</view>
                            <view>毛利：{{ item.IsMaori == 1 ? item.Maori : '-' }}</view>
                            <uni-icons class="more" type="forward" size="30"></uni-icons>
                        </view>
                    </view>
                </view>
            </mescroll-uni>
        </view>
    </view>
</template>

<script>
import { mapState, mapMutations } from "vuex"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import easyProImage from "@/components/easy/easy-pro-image.vue"
import { GetSaleDetailUserPage } from "@/service/api/erp.js"
export default {
    components: {
        easyProImage,
    },
    computed: {
        ...mapState("report", ["startDate", "endDate", "selectedSalesman", "selectedCustoms", "selectedProject", "selectedMarketing", "selectedWarehouse", "selectedMaterial", "selectedDept", "dataZero"]),
    },
    data() {
        return {
            downOption: {
                use: false,
            },
            config: {
                title: "客户清单",
                centerSlot: true,
            },
            height: "",
            loadOk: false,
            totalPrice: 0,
            type: 2,
            code: '',
            datas: [],
            param: {
                type: this.type,
                pageNumber: 0,
                pageSize: 0,
            },
        }
    },
    onLoad(e) {
        this.type = e.type
        this.code = e.code
    },
    mounted() {
        this.getListHeight()
    },
    onShow() { },
    methods: {
        getListHeight() {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                this.height = e + "px"
                this.loadOk = true
                this.$nextTick(() => {
                    this.refresh()
                })
            })
        },
        //获取列表数据
        getData(page) {
            let param = this.param
            param.pageNumber = page.num
            param.pageSize = page.size
            param.type = +this.type
            param.code = this.code
            if (this.selectedSalesman) {
                param.eCodeArr = [this.selectedSalesman.UserCode]
            } else {
                delete param.eCodeArr
            }
            if (this.selectedCustoms.length > 0) {
                param.bCodeArr = []
                this.selectedCustoms.forEach((e) => {
                    param.bCodeArr.push(e.UserCode)
                })
            } else {
                delete param.bCodeArr
            }
            if (this.selectedProject.length > 0) {
                param.projectArr = []
                this.selectedProject.forEach((e) => {
                    param.projectArr.push(e.ProjectNo)
                })
            } else {
                delete param.projectArr
            }
            if (this.selectedMarketing.length > 0) {
                param.organizationsArr = []
                this.selectedMarketing.forEach((e) => {
                    param.organizationsArr.push(e.OrganizationsNo)
                })
            } else {
                delete param.organizationsArr
            }
            if (this.selectedWarehouse.length > 0) {
                param.stockArr = []
                this.selectedWarehouse.forEach((e) => {
                    param.stockArr.push(e.StockInfoNo)
                })
            } else {
                delete param.stockArr
            }
            if (this.selectedMaterial.length > 0) {
                param.materialArr = []
                this.selectedMaterial.forEach((e) => {
                    param.materialArr.push(e.FNUMBER)
                })
            } else {
                delete param.materialArr
            }
            if (this.selectedDept.length > 0) {
                param.deptArr = []
                this.selectedDept.forEach((e) => {
                    param.deptArr.push(e.DeptInfoNo)
                })
            } else {
                delete param.deptArr
            }
            param.dataZero = this.dataZero
            GetSaleDetailUserPage({
                ...param,
                startDate: this.startDate,
                endDate: this.endDate,
            }).then((res) => {
                if (res.State == 1) {
                    this.totalPrice = res.OtherData;
                    this.mescroll.endBySize(res.Data.length, res.RecordAmout)
                    this.datas = this.datas.concat(res.Data)
                    this.allLength = res.RecordAmout
                    this.loadOk = true
                } else {
                    this.mescroll.endBySize(0, 0)
                    this.easyToast(res.Msg)
                }
            })
        },
        //刷新
        refresh() {
            this.downRefresh()
        },
        //刷新
        downRefresh() {
            this.datas = []
            this.mescroll.resetUpScroll()
        },
        goCommodity(item) {
            console.log(item)
            this.easyGoTo("/pages_erp/new-sale/commodity-list?type=" + this.type + '&code=' + this.code + '&goodcode=' + item.PCode)
        },
    },
}
</script>

<style lang="scss">
.container {
    // padding: $app-page-padding;
}

.main {
    padding: $app-page-padding;
}

.pro-list-item {
    display: flex;
    flex-direction: row;
    padding: $app-page-padding;
    background: $color-white;
    margin-bottom: $app-page-padding;
    border-radius: 16rpx;

    .pro-main {
        display: flex;
        flex: 1;
        flex-direction: column;

        text {
            color: $app-color-text-tip;
        }

        .pro-name {
            .pro-name-text {
                font-size: $font-size-30;
                font-weight: 700;
                color: $app-color-text-main;
            }

            .gift {
                color: $app-color-main;
            }
        }

        .custom-main {
            background: #F5F5F5;
            border-radius: 12rpx;
            padding: 24rpx 32rpx 8rpx 32rpx;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            position: relative;

            view {
                width: 50%;
                font-size: 28rpx;
                padding-bottom: 16rpx;
            }

            .more {
                position: absolute;
                right: 0;
                top: 40%;
            }
        }

        .pro-price {
            display: flex;
            flex-direction: row;
            align-items: center;

            .pro-price-left {
                display: flex;
                flex-direction: row;
                align-items: center;
                flex: 1;

                text {
                    margin-right: 8rpx;
                }
            }

            .pro-price-right {
                display: flex;
                flex-direction: row;
                align-items: center;

                text {
                    font-size: 28rpx;
                }
            }
        }

        .total-price {
            color: $app-color-text-main;
        }
    }
}
</style>
